◆ Case Study

Noir Brew —
Coffee Shop Landing Page

Designing a dark luxury landing page for a premium specialty coffee brand — from concept to code.

Role Designer & Developer
Duration 1 Week
Tools Figma, VS Code
Tech HTML, CSS, JS
Noir Brew hero screenshot

The Challenge

Design and build a complete landing page for a fictional premium coffee shop brand — "Noir Brew." The page needed to convey luxury, warmth, and craft while remaining fully functional with a reservation system, interactive menu, and image gallery.

The challenge was to create something that felt like a real business website — not a student project — using only vanilla HTML, CSS, and JavaScript with zero frameworks or libraries.

Design Decisions

Dark Aesthetic

Deep blacks with warm gold accents create a moody, upscale atmosphere that mirrors the in-store experience.

Typography

Playfair Display (serif) for headings gives editorial elegance. Inter (sans-serif) for body text ensures readability.

Gold Accent System

A warm gold (#c8a35f) serves as the single accent color — used sparingly for CTAs, badges, and highlights.

Real Photography

High-quality stock photos from Pexels ground the design in reality and give the fictional brand immediate credibility.

Key Features

  • Full-screen parallax hero with animated particle effects and counter stats
  • Tabbed menu system with smooth transitions between Coffee, Specialty, Pastries, and Cold Drinks
  • Responsive image gallery with lightbox and 3D tilt hover effects
  • Auto-playing testimonial carousel with swipe/touch support
  • Reservation form with real-time validation and success animation
  • Infinite scrolling marquee of drink names
  • Glassmorphism navigation with backdrop blur
  • Scroll-triggered reveal animations using IntersectionObserver
  • Back-to-top button with smooth scroll
  • Fully responsive — mobile, tablet, desktop

Technical Approach

The entire project was built with vanilla HTML, CSS, and JavaScript — no React, no Tailwind, no dependencies. This was a deliberate choice to demonstrate core frontend fundamentals.

CSS custom properties power the design system, making colors, spacing, and typography easily configurable. All animations use CSS transitions and transforms for GPU acceleration. JavaScript handles interactivity through event delegation and IntersectionObserver for performance.

"The constraint of no frameworks forced me to think deeply about every line of code — resulting in a lighter, faster, and more intentional product."

What I Learned

  • How to create complex UI interactions (tabs, carousels, lightboxes) without any library
  • The power of CSS custom properties for building scalable design systems
  • IntersectionObserver is incredibly powerful for scroll-based animations
  • Touch event handling for mobile-friendly carousel interactions
  • How typography pairing and color restraint can elevate a design dramatically
  • The importance of prefers-reduced-motion for accessibility
View Live Project →